<template>
	<view class="wrap">
		<u-navbar title="市场" :background="background" back-icon-color="#292929" back-icon-size="36" title-color="#222"
			title-size="34">
			<view slot="right" class="slot-right">
				<u-icon name="search" size="36" color="#292929"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="panel">
				<view class="tab-head">
					<u-tabs :list="tab" :is-scroll="false" height="76" font-size="28" active-color="#3786f5"
						bar-width="88" :current="tabCurrent" @change="change"></u-tabs>
				</view>
				<view class="tab-content">
					<view class="tab-content-item">
						<view class="market-quotations">
							<scroll-view class="scroll-x" scroll-x="true" @scroll="scroll">
								<view class="market-chart">
									<view class="head">
										<view class="label">
											上证指数
										</view>
										<view class="val">
											3643.52
										</view>
									</view>
									<view class="chart-pic">
										<image src="../../static/uview/images/chart.png" mode=""></image>
									</view>
									<view class="footer">
										<view class="val">-19.08</view>
										<view class="percent">-0.52%</view>
									</view>
								</view>
								<view class="market-chart">
									<view class="head">
										<view class="label">
											深证成指
										</view>
										<view class="val">
											14490.81
										</view>
									</view>
									<view class="chart-pic">
										<image src="../../static/uview/images/chart2.png" mode=""></image>
									</view>
									<view class="footer">
										<view class="val">-135.27</view>
										<view class="percent">-0.92%</view>
									</view>
								</view>
								<view class="market-chart">
									<view class="head">
										<view class="label">
											创业板指
										</view>
										<view class="val">
											3143.52
										</view>
									</view>
									<view class="chart-pic">
										<image src="../../static/uview/images/chart3.png" mode=""></image>
									</view>
									<view class="footer">
										<view class="val">-45.73</view>
										<view class="percent">-1.41%</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="market-fx">
							<view class="col market-up" style="width: 35%;">
								<view class="title">涨{{up}}家</view>
								<view class="market-bar"></view>
							</view>
							<view class="col market-flat" style="width: 20%;">
								<view class="title">平{{flat}}家</view>
								<view class="market-bar"></view>
							</view>
							<view class="col market-down" style="width: 45%;">
								<view class="title">跌{{down}}家</view>
								<view class="market-bar"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">大盘异动</view>
					<view class="arrow-right">
						<u-icon name="arrow-right" size="26" color="#c8c8c8"></u-icon>
					</view>
				</view>
				<view class="panel-body">
					<view class="charts-box">
						<qiun-data-charts type="candle" :chartData="chartData" background="none" :ontouch="true" />
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">股票工具</view>
					<view class="arrow-right">
						<text class="arrow-text">查看更多工具</text>
						<u-icon name="arrow-right" size="26" color="#c8c8c8"></u-icon>
					</view>
				</view>
				<view class="panel-body">
					<u-row>
						<u-col span="6">
							<view class="stock-tool">
								<image src="../../static/uview/images/tool1.png" class="icon" mode=""></image>
								<view class="stock-grid">
									<view class="title">沪深L evel-2</view>
									<view class="desc">行情快人一步</view>
								</view>
							</view>
						</u-col>
						<u-col span="6">
							<view class="stock-tool">
								<image src="../../static/uview/images/tool2.png" class="icon" mode=""></image>
								<view class="stock-grid">
									<view class="title">神奇九转</view>
									<view class="desc">发现个股拐点</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">热门板块</view>
					<view class="arrow-right">
						<u-icon name="arrow-right" size="26" color="#c8c8c8"></u-icon>
					</view>
				</view>
				<view class="panel-body">
					<view class="plate-row clearfix">
						<view class="col">
							<view class="plate-box">
								<view class="name">钛白粉</view>
								<view class="val">+3.85%</view>
								<view class="company">天原股份</view>
								<view class="base">17.34 +10.03%</view>
							</view>
						</view>
						<view class="col">
							<view class="plate-box">
								<view class="name">BIPV</view>
								<view class="val">+3.08%</view>
								<view class="company">汉嘉设计</view>
								<view class="base">18.77 +20.01%</view>
							</view>
						</view>
						<view class="col">
							<view class="plate-box">
								<view class="name">棉花</view>
								<view class="val">+2.44%</view>
								<view class="company">常山北明</view>
								<view class="base">8.45 +6.83%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel rank-panel">
				<view class="tab-head">
					<u-tabs :list="tab1" :is-scroll="false" height="76" font-size="28" active-color="#3786f5"
						bar-width="130" bar-height="4" :bar-style="barStyle" :current="tabCurrent" @change="change">
					</u-tabs>
				</view>
				<view class="tab-content">
					<u-table align="left" border-color="transparent">
						<u-tr class="u-tr">
							<u-th class="u-th" width="55%">名称</u-th>
							<u-th class="u-th" width="30%">最新价</u-th>
							<u-th class="u-th" width="15%">涨跌幅</u-th>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td" width="55%">
								<view class="name">天合光能</view>
								<view class="sh">
									688599.SH
								</view>
							</u-td>
							<u-td class="u-td" width="30%">
								<view class="price">55.40</view>
							</u-td>
							<u-td class="u-td" width="15%">
								<view class="chg">+7.16%</view>
							</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td" width="55%">
								<view class="name">禾信仪器</view>
								<view class="sh">
									688622.SH
								</view>
							</u-td>
							<u-td class="u-td" width="30%">
								<view class="price">93.96</view>
							</u-td>
							<u-td class="u-td" width="15%">
								<view class="chg">+4.80%</view>
							</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td" width="55%">
								<view class="name">广大特材</view>
								<view class="sh">
									688186.SH
								</view>
							</u-td>
							<u-td class="u-td" width="30%">
								<view class="price">55.77</view>
							</u-td>
							<u-td class="u-td" width="15%">
								<view class="chg">+4.38%</view>
							</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td" width="55%">
								<view class="name">聚石化学</view>
								<view class="sh">
									688669.SH
								</view>
							</u-td>
							<u-td class="u-td" width="30%">
								<view class="price">33.81</view>
							</u-td>
							<u-td class="u-td" width="15%">
								<view class="chg">+4.35%</view>
							</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td" width="55%">
								<view class="name">赛科希德</view>
								<view class="sh">
									688338.SH
								</view>
							</u-td>
							<u-td class="u-td" width="30%">
								<view class="price">49.50</view>
							</u-td>
							<u-td class="u-td" width="15%">
								<view class="chg">+4.28%</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="tab-footer">
					<button type="default" class="btn section-btn">查看更多</button>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" inactive-color="#868686" active-color="#e95d37" :list="list"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				chartData: {
					"categories": [
						"2020/1/24",
						"2020/1/25",
						"2020/1/28",
						"2020/1/29",
						"2020/1/30",
						"2020/1/31",
						"2020/2/1",
						"2020/2/4",
						"2020/2/5",
						"2020/2/6",
						"2020/2/7",
						"2020/2/8",
						"2020/2/18",
						"2020/2/19",
						"2020/2/20",
						"2020/2/21",
						"2020/2/22",
						"2020/2/25",
						"2020/2/26",
						"2020/2/27",
						"2020/2/28",
						"2020/3/1",
						"2020/3/4",
						"2020/3/5",
						"2020/3/6",
						"2020/3/7",
						"2020/3/8",
						"2020/3/11",
						"2020/3/12",
						"2020/3/13",
						"2020/3/14",
						"2020/3/15",
						"2020/3/18",
						"2020/3/19",
						"2020/3/20",
						"2020/3/21",
						"2020/3/22",
						"2020/3/25",
						"2020/3/26",
						"2020/3/27",
						"2020/3/28",
						"2020/3/29",
						"2020/4/1",
						"2020/4/2",
						"2020/4/3",
						"2020/4/8",
						"2020/4/9",
						"2020/4/10",
						"2020/4/11",
						"2020/4/12",
						"2020/4/15",
						"2020/4/16",
						"2020/4/17",
						"2020/4/18",
						"2020/4/19",
						"2020/4/22",
						"2020/4/23",
						"2020/4/24",
						"2020/4/25",
						"2020/4/26",
						"2020/5/2",
						"2020/5/3",
						"2020/5/6",
						"2020/5/7",
						"2020/5/8",
						"2020/5/9",
						"2020/5/10",
						"2020/5/13",
						"2020/5/14",
						"2020/5/15",
						"2020/5/16",
						"2020/5/17",
						"2020/5/20",
						"2020/5/21",
						"2020/5/22",
						"2020/5/23",
						"2020/5/24",
						"2020/5/27",
						"2020/5/28",
						"2020/5/29",
						"2020/5/30",
						"2020/5/31",
						"2020/6/3",
						"2020/6/4",
						"2020/6/5",
						"2020/6/6",
						"2020/6/7",
						"2020/6/13"
					],
					"legend": {
						"show": false,
					},
					"series": [{
						"name": "上证指数",
						"data": [
							[
								2320.26,
								2302.6,
								2287.3,
								2362.94
							],
							[
								2300,
								2291.3,
								2288.26,
								2308.38
							],
							[
								2295.35,
								2346.5,
								2295.35,
								2346.92
							],
							[
								2347.22,
								2358.98,
								2337.35,
								2363.8
							],
							[
								2360.75,
								2382.48,
								2347.89,
								2383.76
							],
							[
								2383.43,
								2385.42,
								2371.23,
								2391.82
							],
							[
								2377.41,
								2419.02,
								2369.57,
								2421.15
							],
							[
								2425.92,
								2428.15,
								2417.58,
								2440.38
							],
							[
								2411,
								2433.13,
								2403.3,
								2437.42
							],
							[
								2432.68,
								2434.48,
								2427.7,
								2441.73
							],
							[
								2430.69,
								2418.53,
								2394.22,
								2433.89
							],
							[
								2416.62,
								2432.4,
								2414.4,
								2443.03
							],
							[
								2441.91,
								2421.56,
								2415.43,
								2444.8
							],
							[
								2420.26,
								2382.91,
								2373.53,
								2427.07
							],
							[
								2383.49,
								2397.18,
								2370.61,
								2397.94
							],
							[
								2378.82,
								2325.95,
								2309.17,
								2378.82
							],
							[
								2322.94,
								2314.16,
								2308.76,
								2330.88
							],
							[
								2320.62,
								2325.82,
								2315.01,
								2338.78
							],
							[
								2313.74,
								2293.34,
								2289.89,
								2340.71
							],
							[
								2297.77,
								2313.22,
								2292.03,
								2324.63
							],
							[
								2322.32,
								2365.59,
								2308.92,
								2366.16
							],
							[
								2364.54,
								2359.51,
								2330.86,
								2369.65
							],
							[
								2332.08,
								2273.4,
								2259.25,
								2333.54
							],
							[
								2274.81,
								2326.31,
								2270.1,
								2328.14
							],
							[
								2333.61,
								2347.18,
								2321.6,
								2351.44
							],
							[
								2340.44,
								2324.29,
								2304.27,
								2352.02
							],
							[
								2326.42,
								2318.61,
								2314.59,
								2333.67
							],
							[
								2314.68,
								2310.59,
								2296.58,
								2320.96
							],
							[
								2309.16,
								2286.6,
								2264.83,
								2333.29
							],
							[
								2282.17,
								2263.97,
								2253.25,
								2286.33
							],
							[
								2255.77,
								2270.28,
								2253.31,
								2276.22
							],
							[
								2269.31,
								2278.4,
								2250,
								2312.08
							],
							[
								2267.29,
								2240.02,
								2239.21,
								2276.05
							],
							[
								2244.26,
								2257.43,
								2232.02,
								2261.31
							],
							[
								2257.74,
								2317.37,
								2257.42,
								2317.86
							],
							[
								2318.21,
								2324.24,
								2311.6,
								2330.81
							],
							[
								2321.4,
								2328.28,
								2314.97,
								2332
							],
							[
								2334.74,
								2326.72,
								2319.91,
								2344.89
							],
							[
								2318.58,
								2297.67,
								2281.12,
								2319.99
							],
							[
								2299.38,
								2301.26,
								2289,
								2323.48
							],
							[
								2273.55,
								2236.3,
								2232.91,
								2273.55
							],
							[
								2238.49,
								2236.62,
								2228.81,
								2246.87
							],
							[
								2229.46,
								2234.4,
								2227.31,
								2243.95
							],
							[
								2234.9,
								2227.74,
								2220.44,
								2253.42
							],
							[
								2232.69,
								2225.29,
								2217.25,
								2241.34
							],
							[
								2196.24,
								2211.59,
								2180.67,
								2212.59
							],
							[
								2215.47,
								2225.77,
								2215.47,
								2234.73
							],
							[
								2224.93,
								2226.13,
								2212.56,
								2233.04
							],
							[
								2236.98,
								2219.55,
								2217.26,
								2242.48
							],
							[
								2218.09,
								2206.78,
								2204.44,
								2226.26
							],
							[
								2199.91,
								2181.94,
								2177.39,
								2204.99
							],
							[
								2169.63,
								2194.85,
								2165.78,
								2196.43
							],
							[
								2195.03,
								2193.8,
								2178.47,
								2197.51
							],
							[
								2181.82,
								2197.6,
								2175.44,
								2206.03
							],
							[
								2201.12,
								2244.64,
								2200.58,
								2250.11
							],
							[
								2236.4,
								2242.17,
								2232.26,
								2245.12
							],
							[
								2242.62,
								2184.54,
								2182.81,
								2242.62
							],
							[
								2187.35,
								2218.32,
								2184.11,
								2226.12
							],
							[
								2213.19,
								2199.31,
								2191.85,
								2224.63
							],
							[
								2203.89,
								2177.91,
								2173.86,
								2210.58
							],
							[
								2170.78,
								2174.12,
								2161.14,
								2179.65
							],
							[
								2179.05,
								2205.5,
								2179.05,
								2222.81
							],
							[
								2212.5,
								2231.17,
								2212.5,
								2236.07
							],
							[
								2227.86,
								2235.57,
								2219.44,
								2240.26
							],
							[
								2242.39,
								2246.3,
								2235.42,
								2255.21
							],
							[
								2246.96,
								2232.97,
								2221.38,
								2247.86
							],
							[
								2228.82,
								2246.83,
								2225.81,
								2247.67
							],
							[
								2247.68,
								2241.92,
								2231.36,
								2250.85
							],
							[
								2238.9,
								2217.01,
								2205.87,
								2239.93
							],
							[
								2217.09,
								2224.8,
								2213.58,
								2225.19
							],
							[
								2221.34,
								2251.81,
								2210.77,
								2252.87
							],
							[
								2249.81,
								2282.87,
								2248.41,
								2288.09
							],
							[
								2286.33,
								2299.99,
								2281.9,
								2309.39
							],
							[
								2297.11,
								2305.11,
								2290.12,
								2305.3
							],
							[
								2303.75,
								2302.4,
								2292.43,
								2314.18
							],
							[
								2293.81,
								2275.67,
								2274.1,
								2304.95
							],
							[
								2281.45,
								2288.53,
								2270.25,
								2292.59
							],
							[
								2286.66,
								2293.08,
								2283.94,
								2301.7
							],
							[
								2293.4,
								2321.32,
								2281.47,
								2322.1
							],
							[
								2323.54,
								2324.02,
								2321.17,
								2334.33
							],
							[
								2316.25,
								2317.75,
								2310.49,
								2325.72
							],
							[
								2320.74,
								2300.59,
								2299.37,
								2325.53
							],
							[
								2300.21,
								2299.25,
								2294.11,
								2313.43
							],
							[
								2297.1,
								2272.42,
								2264.76,
								2297.1
							],
							[
								2270.71,
								2270.93,
								2260.87,
								2276.86
							],
							[
								2264.43,
								2242.11,
								2240.07,
								2266.69
							],
							[
								2242.26,
								2210.9,
								2205.07,
								2250.63
							],
							[
								2190.1,
								2148.35,
								2126.22,
								2190.1
							]
						]
					}]
				},
				list: [{
					iconPath: "../../static/uview/images/j1.png",
					selectedIconPath: "../../static/uview/images/g1_on.png",
					text: '首页',
					pagePath: '/pages/stock/index',
				}, {
					iconPath: "../../static/uview/images/j2.png",
					selectedIconPath: "../../static/uview/images/g2_on.png",
					text: '自选',
					pagePath: '/pages/stock/optional',
				}, {
					iconPath: "../../static/uview/images/g3.png",
					selectedIconPath: "../../static/uview/images/g3_on.png",
					text: '市场',
					pagePath: '/pages/stock/market',
				}, ],
				current: 0,
				background: {
					backgroundColor: '#fff',
				},
				tab: [{
					name: '沪深'
				}, {
					name: '港股'
				}, {
					name: '美股',
				}],
				tabCurrent: 0, // tabs组件的current值，表示当前活动的tab选项
				up: 1886,
				flat: 227,
				down: 2447,
				tab1: [{
					name: '科创排名'
				}, {
					name: '涨幅排名'
				}, {
					name: '跌幅排名',
				}, {
					name: '5分钟涨幅',
				}],
				barStyle: {
					bottom: "-4rpx"
				}
			}
		},
		computed: {},
		onShow() {},
		methods: {
			change(index) {
				this.tabCurrent = index;
			},
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f4f3f8;
	}

	.slot-right {
		padding: 12rpx 30rpx 12rpx 12rpx;
	}

	.panel {
		margin-bottom: 10rpx;

		.tab-head {
			margin-bottom: 10rpx;
		}

		.tab-content {
			background-color: #fff;
			padding: 10rpx;

			.tab-content-item {
				padding-bottom: 14rpx;
			}
		}
	}

	.market-fx {
		display: flex;
		align-items: center;
		margin: 0 -2rpx;

		.col {
			padding: 0 2rpx;
		}

		.title {
			font-size: 22rpx;
			margin-bottom: 14rpx;
		}

		.market-bar {
			height: 12rpx;
		}

		.market-up {
			.title {
				color: #e97768;
			}

			.market-bar {
				background-color: #e97768;
				border-radius: 6rpx 0 0 6rpx;
			}
		}

		.market-flat {
			.title {
				color: #c4c4c4;
			}

			.market-bar {
				background-color: #c4c4c4;
			}
		}

		.market-down {
			.title {
				color: #7eb679;
			}

			.market-bar {
				background-color: #7eb679;
				border-radius: 0 6rpx 6rpx 0;
			}
		}
	}

	.market-quotations {
		margin-bottom: 30rpx;
		height: 186rpx;
	}

	.market-chart {
		background-color: #7bb976;
		width: 260rpx;
		height: 100%;
		margin-right: 10rpx;
		border-radius: 2rpx;
		padding: 10rpx;
		display: inline-block;

		.head {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.footer {
			font-size: 24rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 36rpx;

			.val {
				margin: 0 8rpx;
			}

			.percent {
				margin: 0 8rpx;
			}
		}

		.chart-pic {
			width: 240rpx;
			height: 90rpx;
			font-size: 0;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	.scroll-x {
		white-space: nowrap;
		height: 186rpx;
	}

	.panel {
		background-color: #fff;

		.panel-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 26rpx;
			border-bottom: 2rpx solid #eee;

			.title {
				font-size: 28rpx;
				color: #333;
			}
		}

	}

	.stock-tool {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;

		.icon {
			display: block;
			width: 56rpx;
			height: 56rpx;
			margin-right: 20rpx;
		}

		.stock-grid {
			line-height: 1;

			.title {
				font-size: 28rpx;
				color: #333333;
			}

			.desc {
				font-size: 24rpx;
				color: #b9b9b9;
			}
		}
	}

	.plate-box {
		text-align: center;
		padding: 20rpx;

		.name {
			font-size: 26rpx;
			color: #333333;
		}

		.val {
			font-size: 30rpx;
			color: #f15330;
		}

		.company {
			font-size: 24rpx;
			color: #f15330;
		}

		.base {
			font-size: 20rpx;
			color: #333333;
		}
	}

	.plate-row {
		.col {
			position: relative;
			width: 33.33%;
			float: left;
		}

		.col::after {
			position: absolute;
			content: '';
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 1rpx;
			height: 108rpx;
			background-color: #ececec;
		}
	}

	.arrow-text {
		font-size: 24rpx;
		margin-right: 26rpx;
		color: #b3b3b3;
	}

	.u-th {
		background-color: #fff;
		font-size: 24rpx;
		color: #909090;
		line-height: 30rpx;
		font-weight: normal;
	}

	.u-td {
		vertical-align: middle;
		height: 100rpx;

		.name {
			font-size: 28rpx;
			color: #111111;
		}

		.sh {
			font-size: 20rpx;
			color: #5f5f5f;
		}

		.price {
			color: #393939;
			font-size: 24rpx;
		}

		.chg {
			color: #e24c39;
			font-size: 24rpx;
		}
	}

	.rank-panel {
		.tab-head {
			border-bottom: 1rpx solid #eaeae8;
		}

		.tab-content {
			padding: 0 30rpx;
		}

		.tab-footer {
			border-top: 1rpx solid #eaeae8;
			padding: 5rpx;

			.section-btn {
				background-color: transparent;
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.charts-box {
		height: 310rpx;
	}
</style>
